<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element3.css">
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>仓库管理</li>
			    <li>库存查询</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<!-- <input type="text" class="form-control" v-model="search.name" placeholder="商品名称"> -->
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" v-model="search.number" placeholder="仓库编号">
						<input type="text" class="form-control" v-model="search.tel" placeholder="联系电话">
						<input type="text" class="form-control" v-model="search.keyword" placeholder="关键词搜素">
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-default" @click="resetForm()">重置</button>
						<button type="button" class="btn btn-default" @click="getListExport()">导出</button>
						<div style="float: right;margin-right: 20px;font-size: 16px;">
							<span   style="margin-right: 5px;">
								库存总数:
								<span style="color: red;">{{roomTotal.sum}}</span>
							</span>
							<span   style="margin-right: 5px;">
								库存总成本:
								<span style="color: red;">{{roomTotal.sum_price}}</span>
							</span>
							<span  style="margin-right: 5px;">
								商品数量:
								<span  style="color: red;">{{roomTotal.count}}</span>
						</div>
						
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>商品图像</th>
								<th>商品名称</th>
								<th>尺码</th>
								<th>颜色</th>
								
								<th>类别</th>
								<th>品牌</th>
								<th>所属仓库</th>
								<th>当前库存</th>
								<th>成本价</th>
								<th>成本价合计</th>
								<th>商品批次</th>
								<th>规格型号</th>
								<th>相关操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="row in rows">
								<td>
									<a :href="row.goodsinfo.picture" title='点击看大图' target="_BLANK" class="pre_view">
										<img :src="row.goodsinfo.pic_tmb" height="38">
									</a>
								</td>
								<td>{{ row.goodsinfo.name }}</td>
								<td>{{ row.spec }}</td>
								<td>{{ row.color }}</td>
								
								<td>{{ row.goodsinfo.cate_info.name }}</td>
								<td>{{ row.goodsinfo.brand_info.name }}</td>
								<td>{{ row.warehouseinfo.name }}</td>
								<td>{{ row.nums }}</td>
								<td>{{ row.origin_price }}</td>
								<td>{{ row.nums*row.origin_price }}</td>
								<td>{{ row.batch }}</td>
								<td>{{ row.goodsinfo.size_set }}</td>
								<td>
									<a href="#" @click="openWarehouse(row.id)" ><i class="fa"> </i>  详情</a>
									<a href="#" @click="delRoom(row.id)" ><i class="fa"> </i>  删除</a>
								</td>
							</tr>
							<tr v-if="rows.length===0">
								<td colspan="8" style="color:red">查询无记录</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- 添加、修改 仓库 -->
		<!-- 修改物流 -->
		<el-dialog
		:title="title"
		:visible.sync="showModal"
		width="60%">
			<div style="height: 350px;overflow-y:scroll;">
				<el-table ref="multipleTable" :data="roomInfoData" tooltip-effect="dark" style="width: 100%" border>
					<el-table-column label="操作时间" prop="auditingtime" min-width="70">
					</el-table-column>
					<el-table-column label="数据类型" prop="typeName" min-width="70">
					</el-table-column>
					<el-table-column label="单据编号" prop="number" min-width="70">
					</el-table-column>
					<el-table-column label="操作类型" min-width="70">
						<template slot-scope="scope">
							<div >
								{{scope.row.type == 7 ? '增加' : '减少'}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作数量" prop="nums" min-width="70">
					</el-table-column>
				</el-table>
			</div>
			<div class="page-container display-flex">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="showModal = false">确 定</el-button>
			</span>
		</el-dialog>
		<!-- END MAIN CONTENT -->
	</div>	
	<!-- 商品编辑模板 -->
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/assets/scripts/tool.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					name: '',
					number: '',
					tel:'',
					keyword:''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				title:'库存详情',
				roomInfoData:[],
				currentPage:1,//当前页
				totalPage:0,
				limit:10,
				roomInfoId:null,
				roomTotal:{
					count:'',
					sum:''
				},
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
			},
			//watch监听
			watch:{
				//监控person对象的值,对象的监控只能获取新值
				search: {
					//开启深度监控；监控对象中的属性值变化
					deep: true,
					//获取到对象的最新属性数据(obj代表新对象)
					handler(newValue, oldValue){
						this.getList();
					}
				}
			},
			created: function(){
				this.getList();
				// this.getRoomTotal();
			},
			methods:{
				// 删除入库房间
				delRoom: function(id){
					var _this = this;
					$.post("{%:url('Warehouse/del_room')%}?id=" + id,{},function(rsp){
						if(rsp.code == 1){
							_this.$message.success(rsp.msg);
							_this.getList(_this.cur_page);
						}else{
							_this.$message.error(rsp.msg);
						}
						
					},'json')
				},
				openWarehouse(id){
					this.roomInfoId = id;
					this.roomInfo();
					this.showModal = true;
				},
				roomInfo() {
					let t = this;
					
					$.post("{%:url('Warehouse/room_info')%}?id=" + t.roomInfoId,{
						page:t.currentPage,
						page_size:t.limit
					},function(rsp){
						console.log({rsp});
						if(rsp.code == 1){
							t.roomInfoData = rsp.data.data;
							t.currentPage = rsp.data.current_page;
							t.totalPage = rsp.data.total;
						}
					},'json')
				},
				getRoomTotal() {
					var data = this.search;
					$.post("{%:url('Warehouse/room_total')%}" ,data,(rsp) => {
						console.log({rsp});
						if(rsp.code == 1){
							this.roomTotal = rsp.data;
						}
					},'json')
				},
				handleSizeChange(val){
						this.limit = val;
						this.roomInfo();
					},
					// 切换分页
					handleCurrentChange(val){
						this.currentPage = val;
						this.roomInfo();
					},
				getList: function(page=1){
					this.getRoomTotal();
					var _this = this;
					var data = this.search;
					$.post("{%:url('Warehouse/room_list')%}?page=" + page,data,function(rsp){
						console.log({rsp});
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				getListExport: function(){
					var _this = this;
					var data = this.search;
					var params = urlEncode(data)
					let excelUrl = "{%:url('Warehouse/room_list_export')%}?" + params;
					console.log({excelUrl});
					window.location.href = excelUrl;
					// $.get("{%:url('Warehouse/room_list_export')%}",data,function(rsp){
					// 	console.log({rsp});
					// },'json')
				},
				resetForm: function(){
					for (var i in this.search){
						this.search[i] = '';
					}
				}	
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})	

	</script>
</body>

</html>